<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-文章详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/details.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>

    <div id="app">
        <!-- header -->
        <header>
            <div class="headerInfo">
                <ul class="listLeft">
                    <li><a href="javascript:;"><img
                                src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg"
                                alt=""></a></li>
                    <li><a class="active" href="javascript:;">首页</a></li>
                    <li><a href="javascript:;">沸点</a></li>
                    <li><a href="javascript:;">资讯</a></li>
                    <li><a href="javascript:;">小册</a></li>
                    <li><a href="javascript:;">活动</a></li>
                    <li><a href="javascript:;">开发者大会</a></li>
                    <li><input type="text" placeholder="搜索"></li>
                </ul>
                <ul class="listRight">
                    <!-- <li><input type="text" placeholder="搜索"></li> -->
                    <li><a class="devCenter" href="javascript:;">创作者中心</a></li>
                    <li v-if="loginer == null"><a class="write" href="javascript:;" @click="goLoginPage">写文章 <i
                                class="iconfont icon-caret-down"></i></a></li>
                    <li v-if="loginer == null"><a class="loginBtn" href="./login.html">登录</a></li>
                    <li v-else class="userfaceLi" @mouseover="showSub = true" @mouseleave="showSub = false">
                        <a class="userface" href="javascript:;">
                            <!-- <img src="" alt=""> --> {{loginer.nickname.substr(0,1)}}
                        </a>
                        <div class="subMenu" v-show="showSub">
                            <div><a href="javascript:;">个人中心</a></div>
                            <div><a href="javascript:;">写文章</a></div>
                            <div><a id="logoutBtn" href="javascript:;" @click="logout">退出登录</a></div>
                        </div>
                    </li>
                </ul>
            </div>
        </header>

        <!-- details -->
        <div class="details">
            <div class="detailsArticles">
                <div class="authorInfoHeader">
                    <div>
                        <div><span class="userface">{{articleDetails.author.nickname.substr(0,1)}}</span></div>
                        <div style="margin-left: 10px;">
                            <h3>{{articleDetails.author.nickname}}</h3>
                            <span>{{articleDetails.publishTime}} 阅读 {{articleDetails.views + 1}}</span>
                        </div>
                    </div>
                    <div>
                        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" href="javascript:;">
                            关注</a>
                    </div>
                </div>
                <br>
                <br>
                <div>
                    <h1>{{articleDetails.title}}</h1>
                    <br><br>
                    <div>
                        {{articleDetails.hmContent}}
                    </div>
                </div>
                <p class="zan">
                    <i class="layui-icon layui-icon-praise"></i>
                    <span>{{articleDetails.giveLike}}</span>
                </p>
            </div>
            <div class="detailsAuthor">

            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script>

        let app = new Vue({
            el: '#app',
            data: {
                articleDetails : {
                    author:{
                        nickname : ''
                    }
                },
                id : -1,
                loginer: JSON.parse(window.sessionStorage.getItem('loginer')),
                showSub: false
            },
            methods: {
                initArticleDetails(){
                    getRequest('http://localhost:8080/article/details?id='+this.id).then(resp => {
                        if(resp.data){
                            this.articleDetails = resp.data;
                        }
                    })
                },
                queryStringHandler(){
                    let param = window.location.search.substring(1);// id=6
                    let arr = param.split('=');
                    this.id = arr[1];
                },
                goLoginPage() {
                    window.location.href = './login.html';
                },
                logout() {
                    if (confirm('是否确定退出')) {
                        window.sessionStorage.removeItem('loginer');
                        window.location.reload();
                    }
                }
            },
            mounted(){
                // 获取 url 中的 id
                this.queryStringHandler();
                this.initArticleDetails();
            }
        })
    </script>
</body>

</html>